<template>
  <card class="add-info-card" title="车辆信息" toggle>
    <div class="relative section-item gray car-model-1000">
      <div class="flex">
        <car-info-block
          :carInfo="carInfo"
          :tags="[carInfo.statusStr]"
          :fieldList="[
            { label: '车架号', prop: 'vin' },
            { label: '车辆当前归属门店', prop: 'carSiteName' },
            { label: '归属车场', prop: 'libraryName' },
            { label: '维修单号', prop: 'repairNo' },
          ]"
        />
      </div>
    </div>
  </card>
  <card class="add-info-card" title="维修单信息" toggle :showDivider="false">
    <div class="section-item gray">
      <div class="section-item-content">
        <a-descriptions :size="size" :align="{ label: 'right' }">
          <a-descriptions-item label="维修单关联门店">{{ carInfo.siteName }}</a-descriptions-item>
          <a-descriptions-item label="修理厂">{{ carInfo.repairShop }}</a-descriptions-item>
          <a-descriptions-item label="关联订单号">
            <a-link v-if="carInfo.orderNo" type="link" @click="() => onLink(carInfo)">{{ carInfo.orderNo }}</a-link>
            <div v-if="carInfo.giveStaffName">(交车人：{{ carInfo.giveStaffName }})</div>
          </a-descriptions-item>
          <a-descriptions-item label="承租人信息">
            <div>
              <template v-if="carInfo.memberName && carInfo.memberPhone"> {{ carInfo.memberName }} {{ carInfo.memberPhone }} </template>
              <template v-else>-</template>
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="入厂时间">{{ carInfo.arrivalTime }}</a-descriptions-item>
          <a-descriptions-item label="出厂时间">{{ carInfo.leaveTime }}</a-descriptions-item>
          <a-descriptions-item label="入厂里程">{{ unitVal(carInfo.entranceKilometre, '公里') }}</a-descriptions-item>
          <a-descriptions-item label="出厂里程">{{ unitVal(carInfo.exportKilometre, '公里') }}</a-descriptions-item>

          <a-descriptions-item label="负责人">{{ carInfo.undertaker }}</a-descriptions-item>
          <a-descriptions-item label="备注" :span="3">{{ carInfo.remark }}</a-descriptions-item>
          <a-descriptions-item label="照片" :span="3">
            <upload-img v-model="carInfo.fileIdList" disabled />
          </a-descriptions-item>
          <!-- <a-descriptions-item label="维修内容" :span="3">
            <table-index v-if="carInfo.detailList?.length > 0" :table="table" />
            <div v-else>-</div>
          </a-descriptions-item> -->
        </a-descriptions>
        <div class="flex w-full">
          <div class="flex-initial label-width">维修内容：</div>
          <div class="flex-1 value-width">
            <table-index v-if="carInfo.detailList?.length > 0" :table="table" />
            <div v-else>-</div>
          </div>
        </div>
      </div>
    </div>
    <div class="all-count" v-if="carInfo.detailList && carInfo.detailList.length > 0 && carInfo.status != 0 && carInfo.status != 1">
      <!-- <icon-info-circle-fill style="font-size: 16px; color: #165dffff; margin-right: 4px" /> -->
      合计：<span>{{ carInfo.repairAmount ? carInfo.repairAmount : '0' }}元</span>
    </div>
  </card>
</template>

<script setup>
  import { repairDetail } from '@/api/asset/repair'
  import { onMounted, ref, computed } from 'vue'
  import { useTable } from '@/hooks/table'
  import { unitVal } from '@/utils'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()
  const size = ref('medium')

  const carInfo = ref({})
  // const detailList = ref('')
  const getDetail = (id) => {
    repairDetail({ id: id }).then((res) => {
      console.log(res)
      // if (res.result.status == 0 || res.result.status == 1) {
      //   if (res.result.detailList && res.result.detailList.length > 0) {
      //     res.result.detailList.forEach((e) => {
      //       detailList.value += e.repairItem + ' ' + '|' + ' '
      //     })
      //     detailList.value = detailList.value.substring(0, detailList.value.length - 2) //删除一个空格加一个|
      //   }
      // }
      carInfo.value = res.result
    })
  }

  // table 配置
  const table = computed(() => {
    return useTable({
      pagination: false,
      tableLoading: false,
      bordered: true,
      columns: [
        { title: '维修项目', dataIndex: 'repairItem' },
        { title: '品牌', dataIndex: 'maker' },
        { title: '单价（元）', dataIndex: 'partPrice' },
        { title: '数量', dataIndex: 'num' },
        { title: '总价（元）', dataIndex: 'price' },
        { title: '备注', dataIndex: 'remark' },
      ],
      dataList: carInfo.value.detailList,
    })
  })
  const props = defineProps({
    id: Number,
  })
  const onLink = (record) => {
    navigateTo(`/short-order/detail/${record.orderId}`, `${record.orderCode}-短租详情`)
  }
  onMounted(() => {
    if (props.id) {
      getDetail(props.id)
    }
  })
</script>

<style lang="less" scoped>
  .label-width {
    width: 13.3333333%;
    text-align: right;
    padding-right: 8px;
  }
  .value-width {
    width: 20%;
  }

  .car-msg {
    width: 100%;
    padding: 20px;
    background-color: #f7f8fa;
    .car-lic {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div:nth-child(1) {
        color: #1d2129;
        font-size: 20px;
        font-weight: 600;
      }
      div:nth-child(2) {
        color: #e45800;
        font-size: 14px;
        font-weight: 400;
        padding: 4px 10px;
        background-color: #fff9e8;
        margin-left: 12px;
      }
    }
    .car-name {
      color: #1d2129;
      font-size: 14px;
      margin: 16px 0;
    }
    .car-other {
      color: #1d2129;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      div {
        margin-right: 56px;
      }
    }
  }

  .all-count {
    width: 100%;
    text-align: right;
    color: var(--color-text-1);
    font-size: 14px;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }
  .section-item + .section-item {
    margin-top: 16px;
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
  :deep(.arco-descriptions-item-value, .arco-descriptions-item-value-block) {
    padding-right: 0 !important;
  }
</style>
